<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./code/css/reset.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css">
    <link rel="stylesheet" href="./code/css/index.css">
    <title>省广首页</title>
</head>
<body>
    <header>
        <div class="logo-box">
            <img src="./src/logo.png" alt="logo">
        </div>
        <div class="search-logo">
            <a href="./code/html/search.html">
                <img src="./src/search.png" alt="">
            </a>
        </div>
    </header>
    <section class="content">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="banner">
                        <img src="./src/news.png" alt="">
                        <div class="mask-layer">
                            <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                            <div class="mask-text">
                                <div class="like">
                                    <p class="love">
                                        <img src="./src/love.png" alt="">
                                        999
                                    </p>
                                    <p class="eye">
                                        <img src="./src/eye.png" alt="">
                                        666
                                    </p>
                                </div>
                                <div class="time">
                                    12月26日 07:33:43
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="banner">
                        <img src="./src/news.png" alt="">
                        <div class="mask-layer">
                            <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                            <div class="mask-text">
                                <div class="like">
                                    <p class="love">
                                        <img src="./src/love.png" alt="">
                                        999
                                    </p>
                                    <p class="eye">
                                        <img src="./src/eye.png" alt="">
                                        666
                                    </p>
                                </div>
                                <div class="time">
                                    12月26日 07:33:43
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="banner">
                        <img src="./src/news.png" alt="">
                        <div class="mask-layer">
                            <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                            <div class="mask-text">
                                <div class="like">
                                    <p class="love">
                                        <img src="./src/love.png" alt="">
                                        999
                                    </p>
                                    <p class="eye">
                                        <img src="./src/eye.png" alt="">
                                        666
                                    </p>
                                </div>
                                <div class="time">
                                    12月26日 07:33:43
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            
            
            <!-- 如果需要滚动条 -->
            
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"> </script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
        //   direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        </script>
        
        
        <div class="Firstcontent">
            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/Glove.png" alt="">
                            999
                        </p>
                        <div>
                            <p>2小时前<span>[案例观点]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll1.png" alt="">
                </div>
            </div>
            <hr>
            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/Glove.png" alt="">
                            999
                        </p>
                        <div>
                            <p>5小时前<span>[课程]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll2.png" alt="">
                </div>
            </div>
            <div class="longgray"></div>

            <div class="second">
                <p>#苍井空#互联网卖内衣全球引爆声量飙至7.9亿</p>
                <div class="second-pic">
                    <img src="./src/ll3.png" alt="">
                    <img src="./src/ll4.png" alt="">
                    <img src="./src/ll5.png" alt="">
                </div>
                <div class="second-bottom">
                    <div class="secondtoleft">
                        <p>
                            <img src="./src/rentou.png" alt="">陈正光
                        </p>
                        <p>
                            <img src="./src/i1.png" alt="">6868
                        </p>
                        <p>
                            <img src="./src/Glove.png" alt="">4808
                        </p>
                    </div>
                    <div class="secondtoright">
                        <p>2天前<span>[案例观点]</span></p>
                    </div>
                </div>
            </div>

            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/Glove.png" alt="">
                            6
                        </p>
                        <div>
                            <p>12月26日 07:33:43<span>[新闻]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll6.png" alt="">
                </div>
            </div>
            <hr>
            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/Glove.png" alt="">
                            120
                        </p>
                        <div>
                            <p>12月26日 07:33:43<span>[新闻]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll7.png" alt="">
                </div>
            </div>

            <div class="second">
                <p>#苍井空#互联网卖内衣全球引爆声量飙至7.9亿</p>
                <div class="second-pic">
                    <img src="./src/ll8.png" alt="">
                    <img src="./src/ll9.png" alt="">
                    <img src="./src/ll10.png" alt="">
                </div>
                <div class="second-bottom">
                    <div class="secondtoleft">
                        <p>
                            <img src="./src/rentou.png" alt="">陈正光
                        </p>
                        <p>
                            <img src="./src/i1.png" alt="">6868
                        </p>
                        <p>
                            <img src="./src/Glove.png" alt="">4808
                        </p>
                    </div>
                    <div class="secondtoright">
                        <p>2天前<span>[案例观点]</span></p>
                    </div>
                </div>
            </div>

            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/Glove.png" alt="">
                            6
                        </p>
                        <div>
                            <p>12月26日 07:33:43<span>[项目]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll11.png" alt="">
                </div>
            </div>
            <hr>
            <div class="first1">
                <div class="first1left">
                    <p>#苍井空#互联网卖内衣全球<br> 引爆声量飙至7.9亿</p>
                    <div>
                        <p class="love">
                            <img src="./src/glove.png" alt="">
                            120
                        </p>
                        <div>
                            <p>12月26日 07:33:43<span>[项目]</span></p>
                        </div>
                    </div>
                </div>
                <div class="first1right">
                    <img src="./src/ll12.png" alt="">
                </div>
            </div>
            <hr>
            <p>加载更多</p>
            
        </div>
    </section>

    <footer>
        <ul>
            <li>
                <a href="./index.html">
                    <div class="foot-icon">
                        <img src="./src/footer1.png" alt="">
                    </div>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./code/html/denglu.html">
                    <div class="foot-icon">
                        <img src="./src/footer2.png" alt="">
                    </div>
                    <p>GIMC</p>
                </a>
            </li>
            <li>
                <a href="./code/html/article1.html">
                    <div class="foot-icon">
                        <img src="./src/footer3.png" alt="">
                    </div>
                    <p>文章</p>
                </a>
            </li>
            <li>
                <a href="./code/html/ziyuan1.html">
                    <div class="foot-icon">
                        <img src="./src/footer4.png" alt="">
                    </div>
                    <p>资源</p>
                </a>
            </li>
            <li>
                <a href="./code/html/kecheng1.html">
                    <div class="foot-icon">
                        <img src="./src/footer5.png" alt="">
                    </div>
                    <p>学院</p>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>